@import "../../styles/variables";
@import "../../styles/mixins";

.tabs-container {
  display: flex;
  flex-direction: column;

  .tabs {
    position: relative;

    & > ul {
      background-color: $bg-color;

      & > li {
        display: inline-block;
        @include TypographySymbolText;
        padding: 12px;
        min-width: 120px;

        cursor: pointer;
        text-align: center;

        &:hover,
        &:active,
        &.is-active {
          color: $primary;
        }

        &:active,
        &.is-active {
          background-color: $white;
        }

        &.is-disabled {
          opacity: 0.5;
          color: $text-color;
          cursor: not-allowed;
        }
      }
    }

    &.tabs-button {
      & > ul {
        display: inline-block;
        padding: 1px;
        border: 1px solid $border-color;
        border-radius: 16px;
        background-color: $secondary-bg-color;

        & > li {
          padding: 4px 12px;
          border-radius: 14px;

          &:hover {
            color: $text-color;
          }

          &:active {
            background-color: $text-color;
            color: $white;
          }

          &.is-active {
            background-color: $text-color;
            border-color: $white;
            color: $white;
          }
        }
      }
    }
  }
}

.tab-content {
  padding: 12px 0;

  .tab-panel {
    display: none;

    &.is-active {
      display: block;
    }
  }
}

.tabs-container-vertical {
  flex-direction: row;
  border: 1px solid $border-color;

  .tabs {
    min-width: 128px;

    & > ul {
      height: 100%;
      border-right: 1px solid $border-color;

      & > li {
        display: block;
        padding: 12px;
        border-bottom: 1px solid $border-color;
      }
    }
  }

  .tab-content {
    padding: 0 12px;
  }
}
